<template>
  <div class="Page_ListStyleBox">
    <div class="Page_ListStyleLeftBox">
      <PageHomeFromRouer></PageHomeFromRouer>
    </div>
    <div class="Page_ListStyleRightBox">
      <div class="Page_ListStyleHeadTitleBox">
        <PageHeadRigthFrom></PageHeadRigthFrom>
      </div>
      <div class="Page_ListHeaderTitle">
        <a-breadcrumb style="marginLeft: 80px">
          <a-breadcrumb-item href="/home">工作台</a-breadcrumb-item>
          <a-breadcrumb-item>所有文章</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="List_RightStyleBox">
        <div class="List_RightStyleFromBox">
          <p>标题：<input style="width:220px;height:marginTop:5px;40px;padding:5px;" v-model="val" @input="search" type="text" placeholder="请输入文章标题"/></p>
          <p>
            状态：<select style="width:220px;height:40px;padding:5px;" name="" id="">
              <option value="">已发布</option>
              <option value="">草稿</option>
            </select>
          </p>
          <p>
             分类：<select style="width:220px;height:40px;padding:5px;" name="" id="">
              <option value="When you">When you</option>
              <option value="Fiy let go">Fiy let go</option>
              <option value="go of The">go of The</option>
              <option value="something">something</option>
              <option value="cimSE along">cimSE along</option>
              <option value="SomeT FoTnX">SomeT FoTnX</option>
            </select>
          </p>
          <p>
            <ul class="FomTS">
              <li><a-button type="primary">搜索</a-button></li>
              <li><a-button>重置</a-button></li>
            </ul>
          </p>
        </div>
        <div class="List_FromStyleBox">
          <div class="List_From">
            <p><a-checkbox v-model="isShow">&nbsp;<font style="fontSize:16px">标题</font></a-checkbox></p>
            <p><font style="fontSize:16px">状态</font></p>
            <p><font style="fontSize:16px">分类</font></p>
           
            <p><font style="fontSize:16px;">阅读量</font></p>
            <p><font style="fontSize:16px">喜欢数</font></p>
            <p><font style="fontSize:16;marginLeft:20px;">操作</font></p>
            <p><router-link to="/editor"><a-button type="primary"><plus-outlined />新建</a-button></router-link></p>
          </div>
          <dl v-for="(item,idx) in dataSource" :key="idx"> 
            <dt>
              <p>{{item.title}}</p>
              <p class="sll">
                  <a-tooltip title="Ant User" placement="top">
      <a-avatar style="background-color: #87d068; width:10px;height:10px;">
      </a-avatar>
      
    </a-tooltip>&nbsp;已通过</p>
              <p style="marginLeft:21px" class="Egg" >Egg</p>
              <p style="marginLeft:51px" class="readNum"><a-badge :count="item.id" style="background:#52c41a; borderRadius:15px;" /></p>
              <p><a-badge :count="item.userId" style="background:rgb(245, 11, 128); borderRadius:15px;" /></p>
            </dt>
            <dd>
              <p><router-link style="color:#000;" to="/editor">编辑</router-link></p>
              <p><CalerFrom style="marginTop:15px;"></CalerFrom></p>
              <p><CalerRgba style="marginTop:15px;"></CalerRgba></p>
              <p @click="DelBtn(item)" style="marginLeft: 50px;">删除</p>
            </dd>
          </dl>
         <div class="PageFromNum">
           <p></p>
           <p></p>
           <p><a-pagination @change="onChange" :total="this.total" /></p>
         </div>
        </div>
        <dl style="textAlign:center; marginTop:20px;">
           <dt>
              <a href="https://github.com/fantasticit/wipi"
                ><img src="../../assets/b.png.png" alt=""
              /></a>
            </dt>
            <dd>Copyright ® 2022 Designed by Fantasticit.</dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import CalerRgba from '../../components/CalerRgba';
import CalerFrom from '../../components/CalerFrom';
import PageHeadRigthFrom from "../../components/PageHeadRigthFrom";
import PageHomeFromRouer from "../../components/PageHomeFromRouer";
import Axios from "axios";
import {PlusOutlined } from '@ant-design/icons-vue';
export default {
  data() {
    return {
      dataSource: [],
      isShow: false,
      val: "",
      total:0
    };
  },
  created() {
    this.ListMockDataFun();//数据函数
    this.DelBtn()//删除
    this.search();//搜索
    
  },
  methods: {
    onChange(){//分页
      this.dataSource.length = this.total

    },
    async ListMockDataFun() {
      let res = await Axios.get("/api/BlogsMock");
      this.dataSource = res.data.data;
    },
    async DelBtn(item){
       let res = await Axios.delete(`/api/DelMock/${item.id}`);
       alert(res.data.message);
       this.ListMockDataFun();//数据函数
    },
    async search(){//搜索
      let res =  await Axios.post("/api/Search", { val: this.val })
      this.dataSource = res.data.list;
    }
   
  },
  components: {
    PageHomeFromRouer,
    PageHeadRigthFrom,
    CalerFrom,
    CalerRgba,
    PlusOutlined
  },
};
</script>

<style>
.Page_ListStyleBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.Page_ListStyleLeftBox {
  width: 13%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background: #001529;
  border-right: 1px solid rgb(204, 204, 204);
}
.Page_ListStyleRightBox {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.readNum{
}

.Page_ListStyleHeadTitleBox {
  width: 100%;
  height: 45px;
  top: 50px;
  left: 40%;
  position: absolute;
}
.Page_ListHeaderTitle {
  width: 100%;
  height: 50px;
  top: 0;
  position: sticky;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.PageFromNum{
   width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.List_RightStyleBox {
  width: 100%;
  height: 100%;
  background: #eff2f5;
}
.List_RightStyleFromBox {
  width: 96%;
  height: 150px;
  background: #fff;
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.FomTS {
  width: 150px;
  display: flex;
  margin-top: 80px;
  justify-content: space-around;
}
.List_FromStyleBox {
  width: 96%;
  height: auto;
  background: #fff;
  margin-left: 30px;
  margin-top: 20px;
}
.List_From {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.List_FromStyleBox > dl {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.List_FromStyleBox > dl > dt {
  width: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.List_FromStyleBox > dl > dd {
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.List_FromStyleBox > dl > dd>p{
   margin-left: 50px;
}
.sll{
  margin-left: 50px;
}
.Egg {
  color: #d46b08;
  background: #fff7e6;
  border-color: #ffd591;
}
</style>